
<template>
  <div class="order_box">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goMine">
      </div>
      <div slot="center">
        <span>乘客预约</span>
      </div>
    </topHeader>
    <div class="user_order_con">
      <div class="begin_city_box">
        <div class="dot"></div>
        <div class="title">出发城市</div>
        <div class="city"><input type="text" placeholder="请选择出发城市"></div>
      </div>
      <div class="end_city_box">
        <div class="dot"></div>
        <div class="title">结束城市</div>
        <div class="city"><input type="text" placeholder="请选择出发城市"></div>
      </div>
      <div class="help_call_box">
        <div class="help">
          <div><img src="./../../assets/img/clock.png" alt=""></div>
          <div style="width:23%">出发时间</div>
          <div style="width:60%">
            <Datetime
              width="50%"
              v-model="value5"
              :min-year=2000
              :max-year=2016
              format="YYYY-MM-DD HH:mm"
              @on-change="changeTime"
              :placeholder="'请选择出发时间'"
              year-row="{value}年"
              month-row="{value}月"
              day-row="{value}日"
              hour-row="{value}点"
              minute-row="{value}分"
              confirm-text="完成"
              cancel-text="取消">
              </Datetime>
            </div>
          <!-- <div><input type="text" placeholder="请选择出发时间"></div> -->
        </div>
      </div>
      <div class="car_box">
        <div class="icon">
          <img src="./../../assets/img/people_1.png" alt="">
        </div>
        <div class="title">
            乘车人数
        </div>
        <div class="input_box_num">
          <popup-picker
          :placeholder="'人数'"
          :data="list1"
          v-model="peopleNum"
          @on-show="onShow"
          @on-hide="onHide"
          @on-change="onChange">
          </popup-picker>
        </div>
        <div class="uptel_1">
        </div>
      </div>
      <div class="car_box">
        <div class="icon">
          <img src="./../../assets/img/people_1.png" alt="">
        </div>
        <div class="title">
            等待时间
        </div>
        <div class="input_box_num">
          <popup-picker
          :placeholder="'请选择等待时间'"
          :data="list2"
          v-model="waitTime"
          @on-show="onShow"
          @on-hide="onHide"
          @on-change="onChange">
          </popup-picker>
        </div>
        <div class="uptel_1">
        </div>
      </div>
      <div class="summit_btn" @click="sumitOrder">
        提交预约
      </div>
    </div>
    <toast v-model="orderSuccess" @on-hide="onToastHide">预约成功</toast>
  </div>
</template>

<script>
import topHeader from './../../components/topHeader'
import { PopupPicker, Datetime, Toast } from 'vux'
export default {
  data () {
    return {
      list1: [['1人', '1人', '1人', '1人', '1人', '1人', '1人']],
      list2: [['2个小时', '2个小时', '12个小时', '2个小时', '2个小时', '2个小时', '2个小时']],
      peopleNum: [],
      waitTime: [],
      value5: '',
      orderSuccess: false
    }
  },

  components: {
    topHeader,
    PopupPicker,
    Datetime,
    Toast
  },

  computed: {},

  mounted () {},

  methods: {
    goMine () {
      this.$router.go(-1)
    },
    onShow () {},
    onHide () {},
    onChange () {},
    changeTime () {},
    sumitOrder () {
      this.orderSuccess = true
    },
    onToastHide () {}
  }
}

</script>
<style lang='less' scoped>
@import url('./orderCar.less');
</style>